<template>
    <div class="child">
        <h3>子组件</h3>
        <h4>我的玩具：{{ toy }}</h4>
        <!-- 点击触发getToy事件，传递参数 toy -->
        <button @click="emit('getToy',toy)">玩具给父亲</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const toy = ref('奥特曼');

//自定义事件getToy
const emit = defineEmits(['getToy'])
</script>

<style scoped>
.child {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f0f0f0;
}
</style>
